"use client"

import { View, Text, StyleSheet, Modal, TouchableOpacity, Dimensions } from "react-native"
import { X, Play, Pause, Volume2, VolumeX } from "lucide-react-native"
import { theme } from "../../constants/theme"
import { useState, useEffect } from "react"
import { LinearGradient } from "expo-linear-gradient"

const { width, height } = Dimensions.get("window")

interface VideoModalProps {
    visible: boolean
    onClose: () => void
    phoneticSymbol: string
}

export function VideoModal({ visible, onClose, phoneticSymbol }: VideoModalProps) {
    const [isPlaying, setIsPlaying] = useState(false)
    const [isMuted, setIsMuted] = useState(false)
    const [progress, setProgress] = useState(0)

    // 模拟视频播放进度
    useEffect(() => {
        let interval: NodeJS.Timeout | null = null

        if (visible && isPlaying) {
            interval = setInterval(() => {
                setProgress((prev) => {
                    if (prev >= 1) {
                        setIsPlaying(false)
                        return 1
                    }
                    return prev + 0.01
                })
            }, 100)
        }

        return () => {
            if (interval) clearInterval(interval)
        }
    }, [visible, isPlaying])

    // 重置状态
    useEffect(() => {
        if (!visible) {
            setIsPlaying(false)
            setProgress(0)
        }
    }, [visible])

    const handlePlayPause = () => {
        setIsPlaying(!isPlaying)
    }

    const handleMute = () => {
        setIsMuted(!isMuted)
    }

    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
            <View style={styles.overlay}>
                <View style={styles.modalContainer}>
                    <View style={styles.header}>
                        <Text style={styles.title}>音标发音视频</Text>
                        <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                            <X size={20} color={theme.colors.neutral.white} />
                        </TouchableOpacity>
                    </View>

                    <View style={styles.videoContainer}>
                        <LinearGradient colors={["#4B7FE5", "#6B9BFF"]} style={styles.videoPlaceholder}>
                            <Text style={styles.phoneticSymbol}>{phoneticSymbol}</Text>

                            {!isPlaying && (
                                <TouchableOpacity style={styles.playOverlay} onPress={handlePlayPause}>
                                    <View style={styles.playButton}>
                                        <Play size={24} color={theme.colors.neutral.white} fill={theme.colors.neutral.white} />
                                    </View>
                                </TouchableOpacity>
                            )}
                        </LinearGradient>

                        <View style={styles.controls}>
                            <TouchableOpacity style={styles.controlButton} onPress={handlePlayPause}>
                                {isPlaying ? (
                                    <Pause size={20} color={theme.colors.neutral.black} />
                                ) : (
                                    <Play size={20} color={theme.colors.neutral.black} />
                                )}
                            </TouchableOpacity>

                            <View style={styles.progressContainer}>
                                <View style={styles.progressBar}>
                                    <View style={[styles.progressFill, { width: `${progress * 100}%` }]} />
                                </View>
                                <Text style={styles.timeText}>{Math.floor(progress * 60)}秒 / 60秒</Text>
                            </View>

                            <TouchableOpacity style={styles.controlButton} onPress={handleMute}>
                                {isMuted ? (
                                    <VolumeX size={20} color={theme.colors.neutral.black} />
                                ) : (
                                    <Volume2 size={20} color={theme.colors.neutral.black} />
                                )}
                            </TouchableOpacity>
                        </View>
                    </View>

                    <View style={styles.infoContainer}>
                        <Text style={styles.infoTitle}>发音要点</Text>
                        <Text style={styles.infoText}>{getPhoneticInfo(phoneticSymbol)}</Text>
                    </View>
                </View>
            </View>
        </Modal>
    )
}

// 根据音标返回发音要点
function getPhoneticInfo(phoneticSymbol: string): string {
    const phoneticInfo: Record<string, string> = {
        "/f/": "上齿轻触下唇，送气发音，声带不振动。",
        "/ɔː/": "圆唇，舌后部抬起，发长元音。",
        "/r/": "舌尖上卷但不触碰上颚，声带振动。",
        "/m/": "双唇闭拢，气流从鼻腔通过，声带振动。",
        "/ju/": "舌位高前，双唇收圆，声带振动。",
        "/l/": "舌尖抵住上齿龈，气流从舌头两侧通过，声带振动。",
        "/eɪ/": "由/e/滑向/ɪ/的双元音，声带振动。",
        "/ʃ/": "舌面抬高接近硬腭，唇微微突出，声带不振动。",
        "/ə/": "中央元音，发音轻松自然，声带振动。",
        "/n/": "舌尖抵住上齿龈，气流从鼻腔通过，声带振动。",
    }

    return phoneticInfo[phoneticSymbol] || "请注意口型和舌位，跟随视频练习发音。"
}

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: "rgba(0, 0, 0, 0.7)",
        justifyContent: "center",
        alignItems: "center",
    },
    modalContainer: {
        width: width * 0.85,
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        backgroundColor: theme.colors.primary.default,
        paddingVertical: theme.spacing.md,
        paddingHorizontal: theme.spacing.lg,
    },
    title: {
        color: theme.colors.neutral.white,
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
    },
    closeButton: {
        width: 30,
        height: 30,
        borderRadius: 15,
        backgroundColor: "rgba(255, 255, 255, 0.2)",
        alignItems: "center",
        justifyContent: "center",
    },
    videoContainer: {
        width: "100%",
        aspectRatio: 16 / 9,
        backgroundColor: theme.colors.neutral.black,
    },
    videoPlaceholder: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
    },
    phoneticSymbol: {
        fontSize: 60,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.white,
    },
    playOverlay: {
        ...StyleSheet.absoluteFillObject,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(0, 0, 0, 0.3)",
    },
    playButton: {
        width: 60,
        height: 60,
        borderRadius: 30,
        backgroundColor: "rgba(91, 142, 244, 0.8)",
        alignItems: "center",
        justifyContent: "center",
    },
    controls: {
        flexDirection: "row",
        alignItems: "center",
        padding: theme.spacing.md,
        backgroundColor: theme.colors.neutral.lightGray,
    },
    controlButton: {
        width: 36,
        height: 36,
        borderRadius: 18,
        backgroundColor: theme.colors.neutral.white,
        alignItems: "center",
        justifyContent: "center",
    },
    progressContainer: {
        flex: 1,
        marginHorizontal: theme.spacing.md,
    },
    progressBar: {
        height: 4,
        backgroundColor: "rgba(0, 0, 0, 0.1)",
        borderRadius: 2,
        overflow: "hidden",
    },
    progressFill: {
        height: "100%",
        backgroundColor: theme.colors.primary.default,
    },
    timeText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
        marginTop: 4,
    },
    infoContainer: {
        padding: theme.spacing.lg,
    },
    infoTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.sm,
    },
    infoText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        lineHeight: 20,
    },
})

